<template>
  <!--首页组件-->
  <div id="punch" style="margin-top: 0px;" >
    <header id="wx-header">
        <div class="center">
            <router-link to="/app" @click="$router.push(`/app`)" tag="div" class="iconfont icon-left">
                <span>返回</span>
            </router-link>
            <span>签到</span>
        </div>
    </header>
    <section>
      <div class="weui-cells" style="margin-top:0px;">
        <div class="weui-cell punch-cell weui-cell_access" id="scanCell" style="padding: 8px 10px 4px 10px;margin-top:5px;">
          <div class="weui-cell__bd weui-cell_tab" @click="tabname = 1 ;" :style="tabname == 1 ? `border-bottom: 0px solid #329ff0;text-align:left;` : `border-bottom: 0px solid #329ff0;text-align:left;` ">
            {{cdate}} - {{company}}
          </div>
        </div>
      </div>

      <div class="wechat-list" style="background-color:#fefefe;">
        <div class="wechat-baidu-map" style="height:350px;width:100%;display:none;">
          <div id="allmap" style="height:350px;width:100%;display:none;" ></div>
        </div>
        <div>
          <div id='container' style="height:350px;width:100%;"></div>
        </div>
        <div style="text-align: left;margin-left:10px;margin-top:10px;">
          <span>IP：{{ip}}</span>
        </div>
        <div style="text-align: left;margin-left:10px;margin-top:10px;">
          <span>时间：{{ctime}}</span>
        </div>
        <div style="text-align: left;margin-left:10px;margin-top:10px;display:none;">
          <span>经度：{{longitude}}</span>
          <span>维度：{{latitude}}</span>
        </div>
        <div style="text-align: left;margin-left:10px;margin-top:10px;">
          <span>地址：{{location}}</span>
        </div>
        <div class="weui-cell punch-cell weui-cell_access" id="scanCell" style="padding: 8px 10px 4px 10px;margin-top:10px;border-bottom: 1px solid #cecece;border-top: 1px solid #cecece;">
          <div class="weui-cell__bd weui-cell_tab" style="text-align:left;width:110%;" >
            拜访对象 <input id="visitName" type="text" placeholder="请输入拜访对象或出席活动" style="outline: 0; height: 30px; line-height: 30px; border: 0px solid #fefefe; border-bottom: 0px solid #cecece; width: 75%;margin-left:5px; " />
          </div>
        </div>
        <div style="text-align: left;margin-left:10px;margin-top:25px;height:240px;">
          <div @click="punchWork();" style="text-align:center;margin-left:35%;margin-right:35%;margin-top:20px;" >
            <img src="https://cdn.jsdelivr.net/gh/Miazzy/yunwisdom_cdn@v1.0.0/images/position.png" style="margin:0px 0px;text-align:center;border-radius:150px;width:110px;height:110px;">
          </div>
          <div style="text-align:center;margin-left:0px;margin-top:10px;">
            <span style="color:#aeaeae;" >{{locationFlag}}</span>
            <span>{{locationTips}}</span>
          </div>
          <div style="text-align:center;margin-left:0px;margin-top:10px;">
            <span @click="relocation" style="border: 1px solid skyblue; padding: 5px 15px; border-radius: 4px; color: skyblue;">重新定位</span>
          </div>
        </div>
      </div>

    </section>
  </div>
</template>
<script>


export default {
    components: {
    },
    mixins: [window.mixin],
    data() {
        return {
            pageName: "签到",
            momentNewMsg: true,
            tabname: '1',
            longitude:'',
            latitude:'',
            location:'',
            ctime:'',
            cdate:'',
            addrs:[],
            locationTips:'',
            locationFlag:'',
            ip:'',
            peer:null,
            company:'成都鹏程晟泰建筑公司',
            ipaddrs:['118.114.247.236', '125.70.13.126' , '101.206.168.248'],
        }
    },
    async activated() {
      this.ctime =  dayjs().format('YYYY-MM-DD HH:mm:ss');
      this.cdate = dayjs().format('YYYY-MM-DD');
      this.$store.commit("toggleTipsStatus", -1);
      this.baiduGeo();
      this.amapGeo();
      this.getMapIP();
    },
    async mounted() {
      this.ctime =  dayjs().format('YYYY-MM-DD HH:mm:ss');
      this.cdate = dayjs().format('YYYY-MM-DD');
      this.baiduGeo();
      this.amapGeo();
      this.getMapIP();
    },
    methods: {
      getUrlParam(name) {
          var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
          var r = window.location.hash.substr(window.location.hash.indexOf('?') + 1).match(reg);  //匹配目标参数
          if (r != null) return decodeURI(r[2]); return null; //返回参数值
      },
      relocation() {
        this.ctime =  dayjs().format('YYYY-MM-DD HH:mm:ss');
        this.baiduGeo();
        this.amapGeo();
        this.getMapIP();
      },
      amapGeo(){
        var vpage = this;
        var map = new AMap.Map('container', {
            resizeEnable: true
        });
        AMap.plugin('AMap.Geolocation', function() {
            var geolocation = new AMap.Geolocation({
                enableHighAccuracy: true,//是否使用高精度定位，默认:true
                timeout: 10000,          //超过10秒后停止定位，默认：5s
                position:'RB',    //定位按钮的停靠位置
                buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点
            });
            map.addControl(geolocation);
            geolocation.getCurrentPosition(function(status,data){
                if(status=='complete'){
                  var str = [];
                  str.push('定位结果：' + data.position);
                  str.push('定位类别：' + data.location_type);
                  if(data.accuracy){
                      str.push('精度：' + data.accuracy + ' 米');
                  }//如为IP精确定位结果则没有精度信息
                  str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
                  //经度
                  vpage.longitude = data.position.KL;
                  //纬度
                  vpage.latitude = data.position.kT;
                  //查询地理位置信息
                  if(vpage.ipaddrs.includes(vpage.ip)){
                    vpage.location = '四川省成都市高新西区西芯大道蓝光集团';
                    vpage.locationTips = '中国四川省成都市郫县西芯大道11号';
                    vpage.locationFlag = '√ 已进入考勤范围 ';
                  }
                }
            });
        });
      },
      baiduGeo(){
        var that = this;
        var vpage = this;
        var map = new BMap.Map("allmap");
        var point = new BMap.Point(vpage.longitude,vpage.latitude);
        map.centerAndZoom(point,14);
        var geolocation = new BMap.Geolocation();
        var geoc = new BMap.Geocoder();
        geoc.getLocation(point, function(rs){
          var addComp = rs.addressComponents;
          //vpage.location = (addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
          if(vpage.ipaddrs.includes(vpage.ip)){
            vpage.location = '中国四川省成都市高新西区西芯大道11号蓝光集团';
            vpage.locationTips = '中国四川省成都市郫县西芯大道11号';
            vpage.locationFlag = '√ 已进入考勤范围 ';
          }
        });
      },
      async punchWork(){
        this.ctime =  dayjs().format('YYYY-MM-DD HH:mm:ss');
        if(this.location!=''&&this.location!=null){
          alert(`签到成功，完成拜访/出席活动的签到，位置：${this.location}！`);
        }
      },
      async getMapIP(){

        var ipInfo = localStorage.getItem(`system_location_info`);
        //此处后端代码为node-spider-api
        var response = await superagent.get('http://app.shengtai.club/ip/');
        var ipLocation = response.body.ip;

        if(ipInfo != null && ipInfo != ''){
          ipInfo = JSON.parse(ipInfo);
        }

        if(ipInfo.result.ip == ipLocation){
          this.ip = ipInfo.result.ip;
        } else {
          this.ip = ipLocation;
        }

        if(this.ipaddrs.includes(this.ip)){
            this.ip = `${this.ip} (蓝光集团内网)`
          this.location = '四川省成都市高新西区西芯大道蓝光集团';
          this.locationTips = '中国四川省成都市郫县西芯大道11号';
          this.locationFlag = '√ 已进入考勤范围 ';
        } else {
          this.location = ipInfo.result.ad_info.nation + ipInfo.result.ad_info.province +  ipInfo.result.ad_info.city +  ipInfo.result.ad_info.district;
          this.locationTips = this.location;
          this.locationFlag = '请确认签到地址 ';
        }
        console.log('ip location : ' + response.body.ip);
      },
      getIPs(callback){
          var ip_dups = {};

          //compatibility for firefox and chrome
          var RTCPeerConnection = window.RTCPeerConnection
              || window.mozRTCPeerConnection
              || window.webkitRTCPeerConnection;
          var useWebKit = !!window.webkitRTCPeerConnection;

          //bypass naive webrtc blocking using an iframe
          if(!RTCPeerConnection){
              //
              var win = iframe.contentWindow;
              RTCPeerConnection = win.RTCPeerConnection
                  || win.mozRTCPeerConnection
                  || win.webkitRTCPeerConnection;
              useWebKit = !!win.webkitRTCPeerConnection;
          }

          //minimal requirements for data connection
          var mediaConstraints = {
              optional: [{RtpDataChannels: true}]
          };

          var servers = {iceServers: [{urls: "stun:stun.services.mozilla.com"}]};

          //construct a new RTCPeerConnection
          var pc = new RTCPeerConnection(servers, mediaConstraints);

          function handleCandidate(candidate){
              //match just the IP address
              var ip_regex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/
              var ip_addr = ip_regex.exec(candidate)[1];

              //remove duplicates
              if(ip_dups[ip_addr] === undefined)
                  callback(ip_addr);
              ip_dups[ip_addr] = true;
          }

          //listen for candidate events
          pc.onicecandidate = function(ice){
              if(ice.candidate){
                handleCandidate(ice.candidate.candidate);
              }
          };

          //create a bogus data channel
          pc.createDataChannel("");

          //create an offer sdp
          pc.createOffer(function(result){
              //trigger the stun server request
              var lines = result.sdp.split('\n');
              console.log('ip info: '+JSON.stringify(lines));
              pc.setLocalDescription(result, function(){}, function(){});
              lines.forEach(function(line){
                if(line.indexOf('a=candidate:') === 0){
                  handleCandidate(line);
                }
              });
          }, function(){});
      },
      updateDisplay(newAddr) {
        var that = this;
        if (newAddr in that.addrs) return;
        else this.addrs[newAddr] = true;
        var displayAddrs = Object.keys(that.addrs).filter(function (k) { return that.addrs[k]; });
        for(var i = 0; i < displayAddrs.length; i++){
            if(displayAddrs[i].length > 16){
                displayAddrs.splice(i, 1);
                i--;
            }
        }
      },
      grepSDP(sdp) {
        var that = this;
        var hosts = [];
        sdp.split('\r\n').forEach((line, index, arr) => {
          if (~line.indexOf("a=candidate")) {
                var parts = line.split(' '),
                    addr = parts[4],
                    type = parts[7];
                if (type === 'host') that.updateDisplay(addr);
            } else if (~line.indexOf("c=")) {
                var parts = line.split(' '),
                    addr = parts[2];
                that.updateDisplay(addr);
            }
        });
      },
      getBrowserIP(){
        var that = this;
        var RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection;
        if (RTCPeerConnection) {
          (() => {
              var rtc = new RTCPeerConnection({iceServers:[]});
              if (1 || window.mozRTCPeerConnection) {
                  rtc.createDataChannel('', {reliable:false});
              };

              rtc.onicecandidate = function (evt) {
                  if (evt.candidate) that.grepSDP("a="+evt.candidate.candidate);
              };
              rtc.createOffer(function (offerDesc) {
                  that.grepSDP(offerDesc.sdp);
                  rtc.setLocalDescription(offerDesc);
              }, function (e) { console.warn("offer failed", e); });

              that.addrs = Object.create(null);
              that.addrs["0.0.0.0"] = false;

          })();
        }
      }
    }
}
</script>
<style>
    @import "../../assets/css/explore.css";

    #news, #puncth {
      margin-top: 28px;
    }

    #search {
      display:none;
    }

    .app-header {
        /* position: absolute; */
        position: relative;
        transition: 0.3s;
        width: 100%;
        z-index: 10000;
        height: 45px;
        line-height: 45px;
        font-size: 17px;
        background: linear-gradient(180deg, #303036, #3c3b40);
        color: #fff;
        text-align: center;
    }

    .weui-cell_tab {
      height: 30px;text-align:center;float:left;width:24.5%;margin:0px 0px;
    }

    .punch-cell {
      border-bottom: 1px solid #d9d9d9;
    }

    .punch-cell::after{
      border-bottom: 1px solid #d9d9d9;
    }

    .wechat-list .list-info {
        position: relative;
        z-index: 2;
        left: 0;
        width: 100%;
        height: 64px;
        padding: 8px;
        background-color: #fff;
    }

    .wechat-list .list-info .header-box {
        position: relative;
        float: left;
        width: 48px;
        height: 48px;
        margin-right: 10px;
        margin-left: 0px;
    }

    .wechat-list .new-msg-count {
        position: absolute;
        font-style: normal;
        font-family: PingFang SC, Hiragino Sans GB, Arial, Microsoft YaHei, Helvetica;
        right: -9px;
        top: -5px;
        z-index: 2;
        padding: 0 4px;
        width: auto;
        min-width: 18px;
        height: 18px;
        line-height: 18px;
        border-radius: 9px;
        color: #fff;
        text-align: center;
        font-size: 14px;
        background-color: #f43531;
    }

    .wechat-list .new-msg-dot {
        position: absolute;
        right: -4px;
        top: -3px;
        width: 10px;
        height: 10px;
        z-index: 2;
        border-radius: 50%;
        color: #ffffff;
        text-align: center;
        background-color: red;
        background-color: #f43531;
        font-size: 0;
    }

    .wechat-list .list-info .header-box .header {
        height: 100%;
        border-radius: 5px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        display: -webkit-flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-align: start;
        -webkit-align-items: flex-start;
        -ms-flex-align: start;
        align-items: flex-start;
        overflow: hidden;
        background: #dddbdb;
    }

    .wechat-list .list-info .header-box .header img {
        width: 10%;
        height: auto;
        -webkit-box-flex: 2;
        -webkit-flex-grow: 2;
        -ms-flex-positive: 2;
        flex-grow: 2;
        border: 0;
    }

    .wechat-list .list-info .desc-box {
        overflow: hidden;
    }

    .wechat-list .list-info .desc-box .desc-time {
        float: right;
        color: #b8b8b8;
    }

    .wechat-list .list-info .desc-box .desc-author {
        height: 25px;
        line-height: 25px;
        font-size: 16px;
        color: #000;
    }

    .wechat-list .list-info .desc-box .desc-msg {
        height: 23px;
        line-height: 23px;
        font-size: 14px;
        color: #888;
    }

    .wechat-list .list-info .desc-box .desc-msg .desc-mute {
        float: right;
        color: #b8b8b8;
    }


</style>
